<template>
  <a-menu
    :selectedKeys="selectedKeys"
    :openKeys="openKeys"
    @openChange="onOpenChange"
    :mode="mode"
    :theme="theme"
  >
    <template v-for="item in menuList">
      <a-menu-item v-if="!item.children || item.children.length==0" :key="item.router">
        <template v-if="item.meta">
          <router-link :to="{path:item.router}">
            <icon-font :type="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </router-link>
        </template>
      </a-menu-item>
      <sub-menu v-else :menu-info="item" :key="item.router" />
    </template>
  </a-menu>
</template>

<script>
import path from "path";
import SubMenu from "./SubMenu";

export default {
  components: {
    SubMenu
  },
  props: {
    menus: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: "dark"
    },
    mode: {
      type: String,
      default: "inline"
    }
  },
  data() {
    return {
      rootSubmenuKeys: [], //根目录的keys
      openKeys: [], //展开的菜单目录
      menuList: [], //(渲染list) 删除了隐藏路由,新增了router(全路径path)
      hideRouterArray: [], //页面隐藏路由router集合
      cacheOpenKeys: []
    };
  },
  created() {
    this.menuListHandler();
    this.getRootSubmenuKeys();
    this.initOpenKeys();
  },
  methods: {
    //设置默认展开
    initOpenKeys() {
      //获取默认展开的菜单
      let defaultOpenKeys = this.getOpenKeys(this.$route.path, []);
      //只有在菜单栏类型为侧栏菜单时才获取 //2020/04/25
      //当前侧栏菜单未收缩时不进行获取//2020/04/25
      if (
        this.judgeRouteSelected(this.$route) &&
        this.isSideMenu &&
        this.collapsed === false
      ) {
        this.openKeys = defaultOpenKeys;
      }
      if (this.collapsed === true) this.cacheOpenKeys = defaultOpenKeys; //当侧栏菜单收缩时获取cacheOpenKeys
    },
    //获取父菜单目录集合
    getRootSubmenuKeys() {
      this.rootSubmenuKeys = this.menuList.map(item => item.router);
    },
    //处理外界传入的菜单集合，对页面进行一些操作
    menuListHandler() {
      this.menuList = JSON.parse(JSON.stringify(this.menus));
      this.menuPathHandler(this.menuList, "");
    },
    //处理菜单信息 添加router 为路由全路径 zhu_liangyu 2020/04/14
    menuPathHandler(_menus, basePath) {
      let i = _menus.length;
      while (i--) {
        var _menu = _menus[i];
        //router 为当前菜单全路由
        _menu.router = path.resolve(basePath, _menu.path);

        //如果有子集,继续递归
        if (_menu.children) {
          _menu.children = this.menuPathHandler(_menu.children, _menu.router);
        }

        //菜单栏隐藏菜单
        if (_menu.hidden === true) {
          this.hideRouterArray.push(_menu.router);
          _menus.splice(i, 1);
        }
      }
      return _menus;
    },
    //只展开一个父菜单
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    //获取展开的openKeys
    getOpenKeys(path, openKeys) {
      //获取最后一个/出现的位置
      var index = path.lastIndexOf("/");
      if (index > 0) {
        var _subPath = path.substring(0, index);
        openKeys.push(_subPath);
        this.getOpenKeys(_subPath, openKeys);
      }
      return openKeys;
    },
    //方法名没怎么想好
    //如果当前路由属于隐藏路由 判断其父级的子路由是否全部隐藏(父级的子路由全部隐藏则显示的是父级菜单名称)
    judgeRouteSelected(route) {
      let flag = this.hideRouterArray.indexOf(path) == -1; //判断当前菜单是否被隐藏
      if (flag) return true; //当前路由未被隐藏直接返回
      return route.matched[route.matched.length - 1].parent.meta
        .hideAllChildren; //当前路由被隐藏，判断父级的子集是否全部隐藏
    }
  },
  computed: {
    selectedKeys() {
      let path = this.$route.path;
      if (this.hideRouterArray.indexOf(path) != -1) {
        //暂时解决 子节点隐藏(如果父节点所有子节点均隐藏则选中父亲节点)
        let parent = this.$route.matched[this.$route.matched.length - 1].parent;
        if (parent.meta.hideAllChildren === true) path = parent.path;
      }
      return [path];
    },
    isSideMenu() {
      return this.$store.getters.menuType === "sideMenu";
    }
  },
  watch: {
    $route(to, from) {
      //如果路由跳转的菜单不是被隐藏的,则展开当前跳转菜单的父菜单
      //在侧栏菜单时 2020/4/25
      if (this.judgeRouteSelected(to) && this.isSideMenu) {
        // 收缩状态 给cacheOpenKeys 展开状态 给openKeys
        var openKeys = this.getOpenKeys(this.$route.path, []);
        if (this.collapsed === true) {
          this.cacheOpenKeys = openKeys;
        } else {
          this.openKeys = openKeys;
        }
      }
    },
    collapsed: function(val) {
      if (val === true) {
        //收缩状态 将当前openKeys储存在cacheOpenKeys中,然后将openKeys清空（防止二级菜单不跟着一起收缩的问题）
        this.cacheOpenKeys = this.openKeys;
        this.openKeys = [];
      } else {
        //展开状态 将储存在cacheOpenKeys中的值返还到openKeys，展开收缩前的菜单
        this.openKeys = this.cacheOpenKeys;
        this.cacheOpenKeys = [];
      }
    }
  }
};
</script>
